<template>
<!-- 账户设置 -->
    <div>
        <manage-public-editor :el_title="title">
            <template slot="editorContent">
                <el-form label-position="left"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm edit-from">
                    <div class="editorContent">
                        <el-form-item label="登录名" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="旧密码" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" >提交</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </manage-public-editor>
    </div>
</template>
<script>
export default {
    data(){
        return{
            title:"账户设置",
            activeName: 'first',
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            dialogImageUrl: '',
            dialogVisible: false,
        };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
    
}
</script>
<style lang="scss" scope>

.edit-from{
    .firstClass{
        .el-input{
            width: auto;
        }
    }
    
}


</style>